<template>
	<div>
		<el-form ref="shopFrom" :model="shopFrom" label-width="80px">

			<div style="margin-top: 10px;">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="商品名称">
							<el-input v-model="shopFrom.title"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="店铺名称">
							<el-input v-model="shopFrom.shop_name"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="售价(元)">
							<el-input v-model="shopFrom.price"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="原价(元)">
							<el-input v-model="shopFrom.o_price"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="实际库存">
							<el-input v-model="shopFrom.num"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="商品简介">
							<el-input type="textarea" v-model="shopFrom.describe" placeholder="请简单介绍该商品"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</div>

			<div>
				<!--标题图片-->
				<div class="shop-img">
					<el-row>
						<el-col :span="2">
							<div class="grid-content bg-purple"> 标题图片</div>
						</el-col>
						<el-col :span="22">
							<el-row>
								<el-col :span="24">
									<el-alert title="标题图片只能上传一张！" type="info">
									</el-alert>
								</el-col>
								<el-col :span="24">
									<el-upload action="https://mini.dem99.com/admin/shop/upload_goods_img" list-type="picture-card" name="goods_img" :with-credentials="true" :on-preview="look_titlePic" :on-success="titleSuccess" :limit="1" :on-exceed="titlEexceed" :on-remove="titleRemove">
										<i class="el-icon-plus"></i>
									</el-upload>
									<el-dialog :visible.sync="dialogVisible">
										<img width="100%" :src="shopFrom.title_pic" alt="">
									</el-dialog>
								</el-col>
							</el-row>
						</el-col>
					</el-row>
				</div>

				<!--详情图片-->
				<div class="shop-img">
					<el-row>
						<el-col :span="2">
							<div class="grid-content bg-purple"> 详情图片</div>
						</el-col>
						<el-col :span="22">
							<el-row>
								<el-col :span="24">
									<el-alert title="图片最多可以上传10张且只能上传jpg/png文件，且不超过500kb" type="info">
									</el-alert>
								</el-col>
								<el-col :span="24">
									<el-upload class="upload-demo" action="https://mini.dem99.com/admin/shop/upload_goods_img" name="goods_img" :with-credentials="true" :on-success="describeSuccess" :on-remove="describeRemove" list-type="picture">
										<el-button size="small" plain type="primary">点击上传</el-button>
									</el-upload>
								</el-col>
							</el-row>

						</el-col>
					</el-row>
				</div>
			</div>

			<el-form-item>
				<el-button type="primary" @click="addSubmit">添加</el-button>
				<!--<el-button>取消</el-button>-->
			</el-form-item>

		</el-form>
	</div>
</template>

<script>
	export default {
		name: "addShop",
		data() {
			return {
				describe_pic: [], //描述图片url
				activeIndex: '1', //选项卡
				dialogVisible: false,
				shopFrom: {
					title: '', //名称
					shop_name: '', //店铺名
					price: "", // 售价
					o_price: "", //原价
					num: '', //商品库存数量
					describe_pic: "", //描述图片url
					title_pic: "", //标题图片url
				}
			}
		},
		mounted: function() {
			var that = this;
		},

		methods: {
			//提示
			openHint(msg, type) {
				this.$message({
					message: msg,
					type: type
				});
			},
			//删除本地图片
			titleRemove(file) {
				//console.log(file);
			},
			//查看大图
			look_titlePic(file) {
				this.shopFrom.title_pic = file.url;
				this.dialogVisible = true;
			},
			//文件个数超出
			titlEexceed: function(res, file) {
				var that = this;
				that.openHint("只能上传一张标题图片", "warning")
			},
			//上传callback
			titleSuccess: function(res, file) {
				console.log(res.data);
				if(res.code == 0) {
					this.openHint('上传成功', 'success')
					this.shopFrom.title_pic = res.data;
				} else {
					this.openHint('上传失败', 'error')
				}
			},
			//详情图片-删除
			describeRemove(file, describe_pic) {
				//console.log(describe_pic);
				this.describe_pic = describe_pic;
				this.dispose_pic();
			},
			// callback
			describeSuccess: function(res, file, describe_pic) {
				if(res.code == 0) {
					this.openHint('上传成功', 'success');
					this.describe_pic = describe_pic;
					this.dispose_pic();
				} else {
					this.openHint('上传失败', 'error');
				}
			},
			// 处理详情图片
			dispose_pic: function() {
				var pic_list = [];
				var describe_pic = this.describe_pic;
				for(var i = 0; i < describe_pic.length; i++) {
					if(describe_pic[i].response.code == 0) {
						pic_list.push(describe_pic[i].response.data);
						this.shopFrom.describe_pic = pic_list.toString();
					}
				}
			},
			//确定添加
			addSubmit() {
				var that = this;
				//console.log(this.shopFrom);
				this.$confirm('此操作将添加该商品, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function(res) {
					//console.log(res);
					that.submitShop();
				}).catch(function() {
					that.openHint("已取消", "success")
				});
			},
			//添加商品
			submitShop: function() {
				var that = this;
				var data = this.shopFrom;
				if(data.title !== "" && data.shop_name !== "" && data.o_price !== "" && data.price !== "" && data.num !== "" && data.describe !== "" && data.title_pic !== "" && data.describe_pic !== "") {
					this.$axios.post('/shop/shop_goods', {
						title: data.title,
						shop_name: data.shop_name,
						o_price: data.o_price * 100,
						price: data.price * 100,
						num: data.num,
						describe: data.describe,
						title_pic: data.title_pic,
						describe_pic: data.describe_pic,
					}).then(function(res) {
						if(res.data.code == 0) {
							that.openHint('已添加', 'success');
							that.$router.push({
								path: '/shopList',
								name: 'sList',
							})
						} else {
							that.openHint('添加失败', 'error')
						}
					})
				} else {
					that.openHint('商品信息不全，不能添加！', 'warning')
				}

			}
		}
	}
</script>

<style scoped>
	.header {
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid #eeeeee;
	}
	
	.shop-img {
		margin-bottom: 20px;
		font-size: 14px;
		color: #606266;
		padding: 0 0 0 12px;
	}
	
	.d_tabbar {
		margin-bottom: 10px;
		border-right: 0px;
	}
	
	.menu-item {
		height: 40px;
		line-height: 40px;
	}
</style>